<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 60px;
            margin: 100px auto;
            /* background: -webkit-linear-gradient(top, skyblue, pink); */
            background: -webkit-linear-gradient(top, #f94930 20%, #fedeef 31%);
            /* -webkit解决兼容问题，他是谷歌内核 */
            /* 第一个值是位置
                第二个值是开始颜色
                第三个是结束颜色
                扩展 还可以通过百分比加颜色
            */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>